<template>
  <footer class="footer" v-if="footerData">
    <div class="container border-bottom link-container">
      <!--  -->
      <div class="row">
        <div class="col-md-3">
          <!-- <div class="widget">OUR PRODUCT</div> -->
          <img :src="require('@/assets/image/logo.png')" class="w-25" />

          <p class="summary"></p>

          <ul class="social-icons2">
            <template
              v-for="network in sharing.networks"
              :key="network.network"
            >
              <li :style="{ backgroundColor: network.color }">
                <a :href="network.url" target="_blank" :title="network.url">
                  <i :class="network.icon"></i>
                </a>
              </li>
            </template>
          </ul>
        </div>

        <div class="col-md-3">
          <div class="widget">QUICK LINKS</div>

          <ul class="menu-footer-navigation">
            <template v-for="(item, index) in menuData" :key="index">
              <li class="menu-item">
                <a :href="item.url" :title="item.url">{{ item.title }}</a>
              </li>
            </template>
          </ul>
        </div>

        <div class="col-md-3">
          <div class="widget">PRODUCT CATEGORY</div>

          <ul class="menu-footer-navigation">
            <template
              v-for="(item, index) in productCategoryList.slice(0, 6)"
              :key="index"
            >
              <li class="menu-item">
                <a :href="`/product/${item.id}`">
                  {{ $wordpressDecodeHTML(item.name) }}
                </a>
              </li>
            </template>
          </ul>
        </div>

        <div class="col-md-3">
          <div class="widget">CONTACT US</div>
          <ul
            class="menu-footer-navigation contact"
            v-if="footerData.contactData"
          >
            {{
              void (contactData = footerData.contactData)
            }}
            <li class="menu-item">
              <i class="fa-solid fa-phone"></i>
              <a>{{ contactData.telList[0].tel }}</a>
            </li>
            <li class="menu-item">
              <i class="fa-solid fa-envelope"></i>
              <a :href="`mailto:${contactData.emailList[0].email}`">
                {{ contactData.emailList[0].email }}
              </a>
            </li>
          </ul>
          <div class="newsletter">
            <!-- <h3>Subscribe to our newsletter</h3> -->
            <form>
              <div class="input-group">
                <input
                  type="email"
                  class="form-control mail-input"
                  placeholder="Recipient's username"
                />
                <button
                  class="btn btn-outline-secondary newsletter-btn"
                  type="button"
                >
                  Subscribe
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

    <div class="container copyright-container" style="">
      <div class="d-flex justify-content-center copyright">
        <p>{{ footerData.copyright }}</p>
      </div>
    </div>
  </footer>
</template>

<script>
import BaseInfo from "@/datas/BaseInfo.json";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  computed,
} from "vue";
export default {
  name: "BaseFooter",
  components: {},
  props: {},
  setup() {
    const { proxy } = getCurrentInstance();

    const data = reactive({
      menuData: BaseInfo.menuData,
      //

      //
      footerData: computed(() => {
        return proxy.$store.getters.footerData;
      }),
      //
      productCategoryList: computed(
        () => proxy.$store.getters.productCategoryList
      ),
      //
      homeBusinessScopeList: computed(
        () => proxy.$store.getters.homeBusinessScopeList
      ),
      //
      sharing: BaseInfo.sharing,
    });
    const refData = toRefs(data);
    onBeforeMount(() => {});
    onMounted(() => {});
    //
    const methods = {
      jumpLink(url) {
        proxy.$router.push(url);
      },
    };
    //
    return {
      ...refData,
      ...methods,
    };
  },
};
</script>
<style lang="scss" scoped>
.footer {
  // padding: 40px;
  background-color: #235852;
  // color: #fff;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.875rem;

  .link-container {
    padding-top: 40px;
    padding-bottom: 50px;
  }

  .footer-top {
    padding: 20px 0;

    p {
      letter-spacing: 0;
      line-height: 1.8em;
      text-align: center;
      font-size: 30px;
      color: #fff;
      font-weight: 400;
    }
  }

  .widget {
    // padding: 20px 0;
    text-transform: uppercase;
    font-size: 18px;
    color: #fff;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.8em;
  }

  .summary {
    margin-top: 34px;
    letter-spacing: 0;
    line-height: 1.7em;
    font-size: 14px;
    color: #fff;
  }
  //
  ul.menu-footer-navigation {
    list-style-type: none;
    padding: 0;
    margin: 0;

    li {
      margin: 0;
      padding: 0;
    }

    i {
      color: #fff;
    }

    a {
      font-size: 16px;
      color: #fff;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.8em;
      text-align: left;
      text-decoration: none;
    }

    a:hover {
      // color: #0accb9;
    }
  }
  //
  .contact {
    i {
      margin-right: 5px;
    }
  }
  //
  .newsletter {
    h3 {
      font-size: 1rem;
      color: #fff;
      font-weight: 700;
    }

    .mailInput {
      max-width: 90%;
      text-indent: 10px;
      outline: 0;
      background-color: transparent;
      box-shadow: 0 0 0 #fff;
      border: 0;
    }

    form {
      margin-top: 10px;

      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 5px;

      .input-group {
        height: 40px;
        line-height: 40px;
      }

      .mail-input {
        font-size: 14px;
        color: #333;
        border-radius: 5px;
        // height: 40px;

        border: 0;
      }
    }

    .newsletter-btn {
      font-size: 14px;
      color: #fff;
      background-color: #235852;
      border-radius: 0;
    }
  }
  ul.social-icons2 {
    li {
      display: inline-block;
      font-size: 1rem;
      width: 2.5rem;
      height: 2.5rem;
      line-height: 2.5rem;
      text-align: center;
      color: #fff;
      border-radius: 100%;
      margin-right: 15px;

      a i {
        vertical-align: middle;
        text-align: center;
        font-size: 1.25rem;
        transition: 0.5s all;
        -webkit-transition: 0.5s all;
        -moz-transition: 0.5s all;
        -o-transition: 0.5s all;
        -ms-transition: 0.5s all;
      }
    }
  }

  .copyright-container {
    padding-top: 20px;
    padding-bottom: 30px;
  }

  .copyright {
    padding-top: 20px;
    padding-bottom: 30px;

    p {
      font-size: 16px;
      color: #fff;
    }
  }
}
</style>
